<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-yellow sidebar-mini">

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-create-user">
    <div class="modal-dialog" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">创建帐户</h4>
            </div>
            <div class="modal-body">
                <form id="userForm-create" class="form-horizontal" role="form">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-account">帐号</label>
                                <div class="col-sm-8">
                                    <input id="create-account" type="text" class="form-control" name="account" autocomplete="off"
                                           placeholder="帐号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-name">姓名</label>
                                <div class="col-sm-8">
                                    <input id="create-name" type="text" class="form-control" name="name" autocomplete="off"
                                           placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="create-tel">电话</label>
                                <div class="col-sm-8">
                                    <input id="create-tel" type="text" class="form-control" name="tel" autocomplete="off"
                                           placeholder="电话">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-xs-4 control-label">所属部门</label>
                                <div class="col-xs-8">
                                    <div id="deptTree-create" class="ztree"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">角色</label>
                                <div class="col-sm-8">
                                    <div id="roleTree-create" class="ztree"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border: none">
                <button type="button" class="btn btn-info" id="btn-create-user" shiro:haspermission="system:user:edit">
                    提交
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-edit-user">
    <div class="modal-dialog" style="width: 1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑帐户</h4>
            </div>
            <div class="modal-body">
                <form id="userForm-edit" class="form-horizontal">
                    <input type="hidden" name="id">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="edit-name">姓名</label>
                                <div class="col-sm-8">
                                    <input id="edit-name" type="text" class="form-control" name="name" autocomplete="off"
                                           placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="edit-tel">电话</label>
                                <div class="col-sm-8">
                                    <input id="edit-tel" type="text" class="form-control" name="tel" autocomplete="off"
                                           placeholder="电话">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">所属部门</label>
                                <div class="col-sm-8">
                                    <div id="deptTree-edit" class="ztree"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">审核级别</label>
                                <div class="col-sm-8">
                                    <div id="orgTree-edit" class="ztree"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">角色</label>
                                <div class="col-sm-8">
                                    <div id="roleTree-edit" class="ztree"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border: none">
                <button type="button" shiro:haspermission="system:user:edit" class="btn btn-info" id="btn-edit-user">
                    提交
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>用户列表</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label for="query-account">帐号</label>
                                    <input id="query-account" type="text" name="account" class="form-control" placeholder="请输入帐号或者姓名">
                                </div>
                                <div class="form-group">
                                    <label for="query-status">状态</label>
                                    <select id="query-status" name="status" class="form-control">
                                        <option value="1" selected="selected">正常</option>
                                        <option value="0">锁定</option>
                                        <option value="">全部</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search" onclick="js.table.search(table);">
                                    <span class="Bold">搜索</span>
                                </button>
                                <a href="javascript:void(0);" shiro:haspermission="system:user:edit"
                                   class="btn btn-info pull-right" onclick="openCreateUserModal()">
                                    <span class="Bold">添加</span>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table;
    let roleTree, deptTree,orgTree;

    /** 修改用户状态 */
    function lockUser(id, status) {
        js.post({
            url: ctx + "sys/user/update",
            data: {
                id: id,
                status: status
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    /** 重置密码 */
    function resetPassword(id) {
        js.post({
            url: ctx + "sys/user/reset",
            data: {
                id: id
            }
        });
    }

    /** * 创建用户模态框 */
    function openCreateUserModal() {
        deptTree = js.tree.init({
            id: "deptTree-create",
            expandAll: true,
            async: {
                url: ctx + "sys/user/depts"
            },
            check: {
                chkStyle: 'radio',
                radioType: "all"
            },
            data: {
                key: {
                    name: "name"                                                   // 节点数据保存节点名称的属性名称
                }
            }
        });
        js.tree.expandAll(deptTree, false);
        roleTree = js.tree.init({
            id: "roleTree-create",
            expandAll: true,
            async: {
                url: ctx + "sys/user/roles"
            },
            data: {
                key: {
                    name: "name"                                                   // 节点数据保存节点名称的属性名称
                }
            }
        });
        js.modal.open("modal-create-user");
    }

    /** * 修改用户模态框 */
    function openEditUserModal(row) {
        $("#userForm-edit").fillData(row);
        roleTree = js.tree.init({
            id: "roleTree-edit",
            async: {
                url: ctx + "sys/user/roles/" + row.id
            },
            data: {
                key: {
                    name: "name"                                                   // 节点数据保存节点名称的属性名称
                }
            }
        });
        orgTree = js.tree.init({
            id: "orgTree-edit",
            async: {
                url: ctx + "sys/user/orgs/" + row.id
            },
            check: {
                chkStyle: 'radio',
                radioType: "all"
            },
            data: {
                key: {
                    name: "name"                                                   // 节点数据保存节点名称的属性名称
                }
            }
        });
        js.tree.expandAll(orgTree, false);
        deptTree = js.tree.init({
            id: "deptTree-edit",
            async: {
                url: ctx + "sys/user/depts/" + row.id
            },
            check: {
                chkStyle: 'radio',
                radioType: "all"
            },
            data: {
                key: {
                    name: "name"                                                   // 节点数据保存节点名称的属性名称
                }
            }
        });
        js.tree.expandAll(deptTree, false);
        js.modal.open("modal-edit-user");
        setTimeout(function () {
            js.validate.validing("userForm-edit");
            roleTree.expandAll(true);
            deptTree.expandAll(true);
        }, 500);
    }

    $(function () {

        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "sys/user/list",
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "帐号", field: 'account'},
                {title: "姓名", field: 'name'},
                {title: "电话", field: 'tel'},
                {title: "所属科室", field: 'deptName'},
                {title: "所属部门", field: 'branchName'},
                {
                    title: "状态", field: 'status',
                    formatter: function (value, row) {
                        if (row.status === 1) {
                            return '<span class="badge label-success">正常</span>';
                        } else if (row.status === 0) {
                            return '<span class="badge label-danger">锁定</span>';
                        }
                    }
                },
                {
                    title: "操作",
                    width: '250',
                    formatter: function (value, row) {
                        var actions = [];
                        if (hasP('system:user:edit')) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditUserModal(' + js.jsonStringify(row) + ')"> 编辑</a> ');
                            if (row.status === 1) {
                                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="lockUser(' + row.id + ', 0)"> 锁定</a> ');
                                actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="resetPassword(' + row.id + ')"> 重置密码</a> ');
                            } else {
                                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="lockUser(' + row.id + ', 1)"> 解锁</a> ');
                            }
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        /** 创建用户验证规则 */
        js.validate.init("userForm-create", {
            fields: {
                account: {
                    validators: {
                        notEmpty: {message: '请输入帐号'},
                        remote: {
                            url: ctx + "sys/user/checkUnique",
                            message: '帐号已存在',
                            delay: 500,
                            type: 'POST',
                            data: {account: $("#account").val()}
                        }
                    }
                },
                name: {validators: {notEmpty: {message: '请输入姓名'}}}
            }
        });
        /** 创建帐户 */
        $("#btn-create-user").click(function () {
            if (js.validate.isValid("userForm-create")) {
                js.post({
                    url: ctx + "sys/user/save",
                    data: $("#userForm-create").serialize() + "&roleIds=" + js.tree.getCheckedNodes(roleTree) + "&deptId=" + js.tree.getCheckedNodes(deptTree),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                            js.modal.hide("modal-create-user");
                        } else {
                            js.modal.warning(result.msg);
                        }
                    }
                });
            }
        });
        /** 隐藏模态框重置创建表单 */
        js.modal.hideEvent("modal-create-user", function () {
            js.validate.reset("userForm-create");
            js.reset("userForm-create");
        });


        /** 修改用户验证规则 */
        js.validate.init("userForm-edit", {
            fields: {
                name: {validators: {notEmpty: {message: '请输入姓名'}}}
            }
        });
        /** 编辑帐户 */
        $("#btn-edit-user").click(function () {
            console.log($("#userForm-edit").serialize() +  "&roleIds=" + js.tree.getCheckedNodes(roleTree) + "&orgId=" + js.tree.getCheckedNodes(orgTree) + "&deptId=" + js.tree.getCheckedNodes(deptTree))
            if (js.validate.isValid("userForm-edit")) {
                js.post({
                    url: ctx + "sys/user/edit",
                    data: $("#userForm-edit").serialize() +  "&roleIds=" + js.tree.getCheckedNodes(roleTree) + "&orgId=" + js.tree.getCheckedNodes(orgTree) + "&deptId=" + js.tree.getCheckedNodes(deptTree),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                            js.modal.hide("modal-edit-user");
                        } else {
                            js.modal.warning(result.msg);
                        }
                    }
                });
            }
        });
        /** 隐藏模态框重置修改表单 */
        js.modal.hideEvent("modal-edit-user", function () {
            js.validate.reset("userForm-edit");
            js.reset("userForm-edit");
        });

    });

</script>
</body>
</html>
